<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML>
<html style='height: 100%;'>
<head>
<base href="<%=basePath%>">

<title>客户新增页面</title>

<link rel="stylesheet" href="css/vivo.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="js/bootstrap2/css/bootstrap.min.css">
<link rel="stylesheet" href="js/bootstrap2/css/bootstrap-table.css">
<!-- 他一定要在 bootstrap样式后面 否则按钮将不会正常显示 -->
<link rel="stylesheet" href="css/common.css">
<link href="js/select2/select2.min.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="js/webuploader-0.1.5/webuploader.css" />
<script src="js/jquery-1.11.1.js"></script>
<script src="js/bootstrap2/js/bootstrap-table.js"></script>
<script src="js/bootstrap2/js/bootstrap-table-zh-CN.js"></script>
<script src="js/bootstrap2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/layui-v2.1.5/layui/layui.all.js"></script>
<script type="text/javascript" src="js/webuploader-0.1.5/webuploader.js"></script>
<script type="text/javascript" src="js/sharefunction.js"></script>
<script src="js/select2/select2.min.js"></script>
<script type="text/javascript" src="<%=basePath%>js/My97DatePicker/WdatePicker.js"></script>
<script src="js/form.js"></script>
<!-- 图片放大 -->
<script src="js/postbird-img-glass/postbird-img-glass.js"></script>

<style type="text/css">
form.cmxform fieldset {
	border: 1px solid #dddddd;
	background-color: white;
}

.hstyle {
	padding: 5px;
}

.clearfix:after {
	content: "\20";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden
}

.clearfix {
	zoom: 1;
}

.tabBar {
	border-bottom: 2px solid #222
}

.tabBar span {
	background-color: #e8e8e8;
	cursor: pointer;
	display: inline-block;
	float: left;
	font-weight: bold;
	height: 30px;
	line-height: 30px;
	padding: 0 15px
}

.tabBar span.current {
	background-color: #222;
	color: #fff
}

.tabCon {
	display: none
}

.mingcheng {
	display: -moz-inline-box;
	display: inline-block;
	width: 100px;
	text-align: right;
}

.neirong {
	width: 200px
}

input[type="text"] {
	height: 30px;
	margin-bottom: 0px;
}
</style>
<script type="text/javascript">
	var historyStatus=parent.$("#historyStatus").val();
	$(function() {
		  //上传按钮设置为可点击0：未迁出；1：迁出
	   if(historyStatus==0){
	   			$("#customerInfo div[id^='filePicker']").css("display","inline-block");
	   			$("#customerInfo").find("input,textarea").attr("readonly",false);
			  	 $("#customerInfo .icon-fullscreen").show();
			   $("#customerInfo .addbtn").attr("disabled",false);
	   }else{
	   			$("#customerInfo div[id^='filePicker']").css("display","none");
	   			$("#customerInfo").find("input,textarea").attr("readonly",true);
			   $("#customerInfo .icon-fullscreen").hide();
			   $("#customerInfo .addbtn").attr("disabled",true);
			   $("#customerInfo #modifyBtn").remove();
	   }
		//历史客户隐藏按钮
		var status = '${status}';
		if(status=='history'){
			//$(".changeTable").css("display","none");
			$("#customerInfo #modifyBtn").remove();
			
		}
		getFiles();
		//延时加载图片放大功能，图片数量多开启了异步加载
		//setTimeout("imgPlus()",2000);
		//鼠标悬浮提示
		toolTip(true);
	});

	function imgPlus(data) {
	$(".uploadcancel").hide();
		$.each(data, function(i, v) {
			//图片放大
			PostbirdImgGlass.init({
				domSelector : "#" + v.id + " img",
				animation : true,
				//height:'80%',
				myDocument : window.parent.parent.parent
			});
		});
	}
	var rFileList = new Array(); //
	function getFiles() {
		//公司企业证件
		getFileListByFlag($("#panel0 .mCus input[name='companyId']").val(), "企业证件",1, "#list_qyzj", setRFL, imgPlus);
		//法人代表
		getFileListByFlag($("#panel0 .mCus input[name='customerId']").val(), "法人身份证",1, "#list_frsfz", setRFL, imgPlus);
		getFileListByFlag($("#panel0 .mCus input[name='customerId']").val(), "法人护照",1, "#list_frhz", setRFL, imgPlus);
		//自然人 list_zrsfz
		getFileListByFlag($("#panel1 .mCus input[name='customerId']").val(), "自然人身份证",1, "#list_zrsfz", setRFL, imgPlus);
		getFileListByFlag($("#panel1 .mCus input[name='customerId']").val(), "自然人护照",1, "#list_zrhz", setRFL, imgPlus);
	//图片放大初始化,并且每次重新上传图片时也需要初始化
	}

	//设置待删除附件的值到集合中
	function setRFL(id, _this) {
		layer.confirm('删除该图片？', {
			title : '警告',
			icon : 0,
			shade : [ 0.1, '#fff' ]
		}, function() {
			rFileList.push(id);
			//删除指定缩略图
			$("#" + id).remove();
			layer.close(layer.index);
		});
	}

	//控制公司/个人面板显示 隐藏
	function showPanel(val) {
		$("#panel0").css("display", "none");
		$("#panel1").css("display", "none");
		$("div.leaseInfo").show();
		if (val == "1") {
			$("#panel0").css("display", "block");
		//window.parent.$('#customer_ifr').attr('src', $('#customer_ifr').attr('src'));
		} else if (val == "2") {
			$("#panel1").css("display", "block");
		//强制刷新iframe
		//window.parent.$('#customer_ifr').attr('src', $('#customer_ifr').attr('src'));
		}
	 
	}
</script>
<body>
	<div class="page-container">
		<!-- 客户基本信息 -->
		<form class="cmxform" id="customerInfo" method="post" action="customerInfo/customerInfoExamine">
			<input type="hidden" id="customerInfoAdd_articleId">
			<input type="hidden" id="companyAdd_articleId">
			<div>
				<c:set var="customerType" scope="page"
					value="${empty requestScope.customerInfo1 and empty requestScope.customerInfo2 }"></c:set>
				<div>
					<div class="hstyle">
						<c:if test="${pageScope.customerType }">
							<!-- 如果是查看、编辑客户则不显示这个,如果没有查出来法人或者自然人就认为是新增 -->
							<span class="mingcheng">客户类型&nbsp;</span>
							<span>
								<select class="js-example-placeholder-single neirong" name="customerType" id="customerType"
									onchange="showPanel(this.value)">
									<option value=""></option>
									<option value="1">法人</option>
									<option value="2">自然人</option>
								</select>
							</span>
						</c:if>
						<!-- 待出租可以改为自用状态、自用可以改为待出租、空置也可以选择是否出租       0:空置  1：出租   2：自用  3：待出租-->

						<%-- 2018/01/31 弃用，房间状态修改移动到房间修改页面 
							 <c:if test="${requestScope.roomStatus==3  || requestScope.roomStatus==0 }">
								<div id="roomStatus" style="display: inline-block;">
									<span class="mingcheng">是否待出租</span> 
									<span class="mingcheng"style="width: 50px;"><label><input type="radio"value="0" name="roomStatus" checked="checked">是</label></span> 
									<span class="mingcheng" style="width: 50px;"><label><input type="radio" value="1" name="roomStatus">否</label></span>
								</div>
							</c:if>
							
							<c:if test="${requestScope.roomStatus==2}">
								<div id="roomStatus" style="display: inline-block;">
									<span class="mingcheng">是否待出租</span> 
									<span class="mingcheng"style="width: 50px;"><label><input type="radio"value="0" name="roomStatus">是</label></span> 
									<span class="mingcheng" style="width: 50px;"><label><input type="radio" value="1" name="roomStatus" checked="checked">否</label></span>
								</div>
							</c:if>
							 --%>
					</div>
					<div style="border-bottom: 1px solid gray; height: 35px; margin-bottom: 15px;">
						<span class="style_btn" style="width: 100px;">租赁情况</span>
					</div>
					<div class="leaseInfo" <c:if test="${pageScope.customerType }" >style="display:none;"</c:if>>
						<div class="mCus">
							<div class="hstyle">
								<span class="mingcheng">首次租期</span>
								<span>
									<input type="text" name="staLease" id="staLease" class="Wdate neirong leaseDate"
										value="<fmt:formatDate value="${requestScope.customerRoomMap.staLease }" 
											pattern="yyyy-MM-dd"/>"
										readonly="readonly" onClick="WdatePicker({ dateFmt: 'yyyy-MM-dd'})" />
								</span>
								<span class="mingcheng">续租终止</span>
								<span>
									<input type="text" name="endLease" class="Wdate neirong leaseDate"
										value="<fmt:formatDate 
											value="${requestScope.customerRoomMap.endLease }" 
											pattern="yyyy-MM-dd"/>"
										readonly="readonly"
										onClick="WdatePicker({minDate:'#F{$dp.$D(\'staLease\')}',dateFmt: 'yyyy-MM-dd'})" />
								</span>
							</div>
						</div>
					</div>
				</div>

				<!-- 法人信息start 如果没有法人信息则隐藏-->
				<div id="panel0" <c:if test="${empty requestScope.customerInfo1 }" >style="display:none;"</c:if>>
					<!-- 公司信息保存在临时变量中 -->
					<c:set var="company" value="${requestScope.customerInfo1.company }" scope="page"></c:set>

					<div style="border-bottom: 1px solid gray; height: 35px; margin-bottom: 15px;">
						<span class="style_btn" style="width: 100px;">法人单位</span>
					</div>
					<div>
						<!-- 该div用来区分客户和相关人 -->
						<div class="mCus">
							<!-- 法人单位start -->
							<!-- <table cellpadding="10" cellspacing="5" class="mytable"> -->
							<div class="hstyle">
								<!-- 公司id -->
								<input type="hidden" name="companyId" value="${pageScope.company.id }">
								<span class="mingcheng">单位名称</span>
								<span>
									<input class="input-text radius neirong toolTip" type="text"
										value="${pageScope.company.companyName }" name="companyName" />
									<span></span>
								</span>
								<span class="mingcheng">外文名称</span>
								<span>
									<input class="input-text radius neirong toolTip" type="text"
										value="${pageScope.company.companyEnglishName }" name="companyEnglishName" />
									<span></span>
								</span>
								<span class="mingcheng">分支机构</span>
								<span>
									<input class="input-text radius neirong toolTip" type="text"
										value="${pageScope.company.companyBranch }" name="companyBranch" />
									<span></span>
								</span>
							</div>
							<div class="hstyle">
								<span class="mingcheng">企业性质</span>
								<span>
									<input class="input-text radius neirong toolTip" type="text"
										value="${pageScope.company.companyNature }" name="companyNature" />
									<span></span>
								</span>
								<span class="mingcheng">注册地址</span>
								<span>
									<input class="input-text radius neirong toolTip" type="text"
										value="${pageScope.company.registerAddress }" name="registerAddress" />
									<span></span>
								</span>
								<span class="mingcheng">通讯地址</span>
								<span>
									<input class="input-text radius neirong toolTip" type="text"
										value="${pageScope.company.mailingAddress }" name="mailingAddress" />
									<span></span>
								</span>
							</div>
							<div class="hstyle">
								<span class="mingcheng">营业范围</span>
								<span>
									<%-- <input class="input-text radius neirong" type="text"
									value="${pageScope.company.businessScope }"
									name="businessScope" /> --%>
									<textarea class="toolTip" style="width: 509px; height: 80px" name="businessScope">${pageScope.company.businessScope }</textarea>
									<span></span>
								</span>
							</div>
							<div class="hstyle">
								<span class="mingcheng">企业证件</span>
								<span>
									<input class="input-text radius neirong" type="text"
										value="${pageScope.company.companyCard }" name="companyCard" />
								</span>
								<span>
									<!-- 附件上传 法人单位_企业证件 -->
									<!-- 上传按钮 -->
									<div id='filePicker_qyzj' style="display: none; vertical-align: bottom;">上传</div>
									<!-- 缩略图容器 -->
									<div id='list_qyzj' style="padding-left: 40px;"></div>
								</span>
							</div>
							<div class="hstyle">
								<span class="mingcheng">&nbsp;&nbsp;备注信息</span>
								<span>
									<textarea class="toolTip" style="width: 65%;" rows="3" maxlength="200"
										name="customerRemark" id="customerRemark" onkeydown="checkMaxInput(this,200)"
										onkeyup="checkMaxInput(this,200)" onfocus="checkMaxInput(this,200)"
										onblur="checkMaxInput(this,200);resetMaxmsg()">${requestScope.customerInfo1.customerRemark}</textarea>
								</span>
							</div>
							<!-- 法人单位end -->
							<!-- 法人代表 start-->
							<div>
								<!-- 法人代表id -->
								<c:choose>
									<c:when test="${status =='history'}">
										<input type="hidden" name="customerId" value="${requestScope.customerInfo1.sourceId}">
									</c:when>
									<c:otherwise>
										<input type="hidden" name="customerId" value="${requestScope.customerInfo1.id }">
									</c:otherwise>
								</c:choose>
								<div style="border-bottom: 1px solid gray; height: 35px; margin-bottom: 15px;">
									<span class="style_btn" style="width: 100px;">法人代表</span>
								</div>
								<div class="hstyle">
									<span class="mingcheng">&nbsp;&nbsp;&nbsp;&nbsp;姓名</span>
									<span>
										<input type="text" class="input-text radius neirong"
											value="${requestScope.customerInfo1.name }" name="name" />
										<span></span>
									</span>
									<span class="mingcheng">外文名称</span>
									<span>
										<input type="text" class="input-text radius neirong"
											value="${requestScope.customerInfo1.alias }" name="alias" />
										<span></span>
									</span>

								</div>
								<div class="hstyle">
									<span class="mingcheng">固定电话</span>
									<span>
										<input type="text" class="input-text radius neirong"
											value="${requestScope.customerInfo1.tel }" name="tel" />
										<span style="color: red;"></span>
									</span>
									<span class="mingcheng">&nbsp;&nbsp;手机号</span>
									<span>
										<input class="input-text radius neirong" type="text"
											value="${requestScope.customerInfo1.telMobile }" name="telMobile" />
										<span style="color: red;"></span>
									</span>
									<span class="mingcheng">&nbsp;&nbsp;微信号</span>
									<span>
										<input class="input-text radius neirong" value="${requestScope.customerInfo1.weixin }"
											type="text" name="weixin" />
										<span style="color: red;"></span>
									</span>
								</div>

								<div class="hstyle">
									<span class="mingcheng">&nbsp;&nbsp;QQ号</span>
									<span>
										<input class="input-text radius neirong" type="text"
											value="${requestScope.customerInfo1.qq }" name="qq" />
										<span></span>
									</span>
									<span class="mingcheng">&nbsp;&nbsp;&nbsp;&nbsp;邮箱</span>
									<span>
										<input class="input-text radius neirong" value="${requestScope.customerInfo1.email }"
											type="text" name="email" />
										<span></span>
									</span>
								</div>
								<div class="hstyle">
									<span class="mingcheng">&nbsp;&nbsp;身份证</span>
									<span>
										<input class="input-text radius neirong" value="${requestScope.customerInfo1.idCard }"
											type="text" name="idCard" />
										<span></span>
									</span>
									<!-- 附件上传 身份证。。。-->
									<!-- 上传按钮 -->
									<div id='filePicker_frsfz' style="display: none; vertical-align: bottom;">上传</div>
									<!-- 缩略图容器 -->
									<div id='list_frsfz' style="padding-left: 40px;"></div>
								</div>
								<div class="hstyle">
									<span class="mingcheng">&nbsp;&nbsp;护照</span>
									<span>
										<input class="input-text radius neirong" value="${requestScope.customerInfo1.passport }"
											type="text" name="passport" />
										<span></span>
									</span>
									<!-- 附件上传 护照。。。-->
									<!-- 上传按钮 -->
									<div id='filePicker_frhz' style="display: none; vertical-align: bottom;">上传</div>
									<!-- 缩略图容器 -->
									<div id='list_frhz' style="padding-left: 40px;"></div>
								</div>
								<div id="tab_demo" class="HuiTab">
									<div class="tabBar clearfix">
										<span>性情分析</span>
										<span>交往记录</span>
										<span>关注事项</span>
									</div>
									<div class="tabCon">性情分析</div>
									<div class="tabCon">交往记录</div>
									<div class="tabCon">关注事项</div>
								</div>
							</div>
						</div>
						<!-- 法人代表 end-->
						<!-- 新增相关人员 -->
						<div id="vant_1">
							<p style="border-bottom: 1px solid gray; padding: 5px">
								<span class="style_btn">相关人员</span>
								<span class="style_input">
									&nbsp;&nbsp;&nbsp;&nbsp;
									<a class="btn btn-danger radius a_font addbtn" onclick="addRelevantDiv(this,'1')"
										disabled="disabled"> 添加</a>
								</span>
							</p>

							<c:forEach items="${requestScope.customerInfo1.correlationCustomer2 }" varStatus="vs" var="t">
								<!-- 展示自然人的 相关人信息,没有自动不显示 -->
								<%@include file="./correlation-Customer.jsp"%>
							</c:forEach>
						</div>
						<!-- 修改时添加变更说明 -->
						<div style="margin: 10px;" hidden="hidden" id="remark">
							变更说明
							<textarea rows="3" name="remark" style="width: 70%"></textarea>
							<span style="color: red;">*</span>
						</div>
						<div style="width: 100%; text-align: center; padding-top: 20px">
							<c:choose>
								<c:when test="${pageScope.customerType }">
									<!-- 保存状态 -->
									<button class="btn btn-danger radius" onClick="customerSubmit(this);" type="button">提交</button>
									<button class="btn btn-danger radius" onClick="customerSubmit(this);" type="button">保存</button>
									<a class="btn btn-default radius" onClick="resetForms(this);">重置</a>
								</c:when>
								<c:otherwise>
									<shiro:hasPermission name="permission:edit">
										<!-- 修改状态 -->
										<!-- <button class="btn btn-danger radius" type="submit">保存编辑</button> -->
										<c:if test="${requestScope.pendStatus }">
											<!-- 如果有待审批则不显示编辑按钮 -->
											<button id="modifyBtn" class="btn btn-danger radius my-btn" onclick="saveCustomer(3)"
												type="button">启用编辑</button>
											<button class="btn btn-danger radius my-btn hidbtn" type="submit">提交审批</button>
											<a class="btn btn-default radius hidbtn" onClick="resetForms(this);"> 重置 </a>
										</c:if>
									</shiro:hasPermission>
								</c:otherwise>
							</c:choose>
							</a>
							<br /> <br />
						</div>
					</div>
				</div>
				<!-- 法人信息end -->
				<!-- 自然人信息start 如果没有自然人则隐藏-->
				<div id="panel1" <c:if test="${empty requestScope.customerInfo2 }" >style="display:none"</c:if>>
					<div style="border-bottom: 1px solid gray; height: 35px; margin-bottom: 15px;">
						<span class="style_btn" style="width: 100px;">个人信息</span>
					</div>
					<div>
						<!-- 该div用来区分客户和相关人 -->
						<div class="mCus">
							<!-- 自然人id -->
							<c:choose>
								<c:when test="${status =='history'}">
									<input type="hidden" name="customerId" value="${requestScope.customerInfo2.sourceId}">
								</c:when>
								<c:otherwise>
									<input type="hidden" name="customerId" value="${requestScope.customerInfo2.id }">
								</c:otherwise>
							</c:choose>
							
							<!-- <table cellpadding="10" cellspacing="5" class="mytable"> -->
							<div class="hstyle">
								<span class="mingcheng">&nbsp;&nbsp;&nbsp;&nbsp;姓名</span>
								<span>
									<input type="text" class="input-text radius neirong"
										value="${requestScope.customerInfo2.name }" name="name" />
									<span></span>
								</span>
								<span class="mingcheng">外文名称</span>
								<span>
									<input type="text" class="input-text radius neirong" name="alias"
										value="${requestScope.customerInfo2.alias }" />
									<span></span>
								</span>

							</div>
							<div class="hstyle">
								<span class="mingcheng">固定电话</span>
								<span>
									<input type="text" class="input-text radius neirong" name="tel"
										value="${requestScope.customerInfo2.tel }" />
									<span style="color: red;"></span>
								</span>
								<span class="mingcheng">&nbsp;&nbsp;手机号</span>
								<span>
									<input class="input-text radius neirong" type="text"
										value="${requestScope.customerInfo2.telMobile }" name="telMobile" />
									<span style="color: red;"></span>
								</span>
								<span class="mingcheng">&nbsp;&nbsp;微信号</span>
								<span>
									<input class="input-text radius neirong" type="text"
										value="${requestScope.customerInfo2.weixin }" name="weixin" />
									<span style="color: red;"></span>
								</span>
							</div>

							<div class="hstyle">
								<span class="mingcheng">&nbsp;&nbsp;QQ号</span>
								<span>
									<input class="input-text radius neirong" type="text"
										value="${requestScope.customerInfo2.qq }" name="qq" />
									<span></span>
								</span>
								<span class="mingcheng">&nbsp;&nbsp;&nbsp;&nbsp;邮箱</span>
								<span>
									<input class="input-text radius neirong" type="text"
										value="${requestScope.customerInfo2.email }" name="email" />
									<span></span>
								</span>
							</div>
							<div class="hstyle">
								<span class="mingcheng">&nbsp;&nbsp;身份证</span>
								<span>
									<input class="input-text radius neirong" value="${requestScope.customerInfo2.idCard }"
										type="text" name="idCard" />
									<span></span>
								</span>
								<!-- 附件上传 身份证。。。-->
								<!-- 上传按钮 -->
								<div id='filePicker_zrsfz' style="display: inline-block; vertical-align: bottom">上传</div>
								<!-- 缩略图容器 -->
								<div id='list_zrsfz' style="padding-left: 40px;"></div>
							</div>
							<div class="hstyle">
								<span class="mingcheng">&nbsp;&nbsp;护照</span>
								<span>
									<input class="input-text radius neirong" type="text" name="passport"
										value="${requestScope.customerInfo2.passport }" />
									<span></span>
								</span>
								<!-- 附件上传 护照。。。-->
								<!-- 上传按钮 -->
								<div id='filePicker_zrhz' style="display: none; vertical-align: bottom">上传</div>
								<!-- 缩略图容器 -->
								<div id='list_zrhz' style="padding-left: 40px;"></div>
							</div>
							<div class="hstyle">
								<span class="mingcheng">&nbsp;&nbsp;备注信息</span>
								<span>
									<textarea style="width: 65%;" rows="3" maxlength="200" name="customerRemark"
										id="customerRemark" onkeydown="checkMaxInput(this,200)" onkeyup="checkMaxInput(this,200)"
										onfocus="checkMaxInput(this,200)" onblur="checkMaxInput(this,200);resetMaxmsg()">${requestScope.customerInfo2.customerRemark }</textarea>
								</span>
							</div>
							<div id="tab_demo" class="HuiTab" style="height: 100px">
								<div class="tabBar clearfix">
									<span>性情分析</span>
									<span>交往记录</span>
									<span>关注事项</span>
								</div>
								<div class="tabCon">性情分析</div>
								<div class="tabCon">交往记录</div>
								<div class="tabCon">关注事项</div>
							</div>
						</div>
						<!-- 新增相关人员 -->
						<div id="vant_2">
							<p style="border-bottom: 1px solid gray; padding: 5px">
								<span class="style_btn">相关人员</span>
								<span class="style_input">
									&nbsp;&nbsp;&nbsp;&nbsp;
									<a class="btn btn-danger radius a_font addbtn" onclick="addRelevantDiv(this,'2')"
										disabled="disabled"> 添加</a>
								</span>
							</p>

							<c:forEach items="${requestScope.customerInfo2.correlationCustomer2 }" varStatus="vs" var="t">
								<!-- 展示自然人的 相关人信息,没有自动不显示 -->
								<%@include file="./correlation-Customer.jsp"%>
							</c:forEach>
						</div>
					</div>
					<!-- 修改时添加变更说明 -->
					<div id="remark" hidden="hidden">
						变更说明
						<textarea rows="3" style="width: 70%" name="remark"></textarea>
						<span style="color: red;">*</span>
					</div>
					<div style="width: 100%; text-align: center; padding-top: 20px">
						<c:choose>
							<c:when test="${pageScope.customerType }">
								<!-- 保存状态 -->
								<button class="btn btn-danger radius" onClick="customerSubmit(this);" type="button">提交</button>
								<button class="btn btn-danger radius" onClick="customerSubmit(this);" type="button">保存</button>
								<a class="btn btn-default radius" onClick="resetForms(this);">重置</a>
							</c:when>
							<c:otherwise>
								<shiro:hasPermission name="permission:edit">
									<!-- 修改状态 -->
									<!-- <button class="btn btn-danger radius" type="submit">保存编辑</button> -->
									<button id="modifyBtn" class="btn btn-danger radius my-btn" onclick="saveCustomer(3)"
										type="button">启用编辑</button>
									<button class="btn btn-danger radius my-btn hidbtn" onclick="customerSubmit(this)"
										type="button">提交审批</button>
									<a class="btn btn-default radius hidbtn" onClick="resetForms(this);"> 重置 </a>
								</shiro:hasPermission>
							</c:otherwise>
						</c:choose>
						</a>
						<br /> <br />
					</div>
				</div>
				<!-- 自然人信息end -->
			</div>
			<input type="hidden" name="fkRoomInfo" id="fkRoomInfo" value="" />
		</form>
		<!-- 客户更改字段列表 -->
		<div style="padding: 10px" class="changeTable">
			<table id="customerChageTable" style="table-layout: fixed"></table>
		</div>

		<script type="text/javascript">
			var count = 0;
			var rCustomerList=new Array();
			//客户类型字段;字段代表产权人个数;该字段只有在新增用户时候能用到;新增时等于0代表产权人，
			//编辑时该字段含义是产权人类型；产权人对应值等于1，所以编辑是该字段值需要被下面的temp覆盖
			var customerIdentity = parent.customerIdentity;
			var temp = '${requestScope.customerInfo1.customerIdentity}${requestScope.customerInfo2.customerIdentity}';
			//如果是编辑用户时就不能根据房间状态来判断该客户的类型，需要直接使用当前客户的类型
			if (temp != '') {
				customerIdentity = temp;
			}
			var customerType;
			$(function() {
				//如果已经保存过了，则开启只读状态
				<c:if test="${not pageScope.customerType }">
					customerType=${requestScope.customerInfo1.customerType}${requestScope.customerInfo2.customerType};
				   $("#customerInfo").find("input,textarea").attr("readonly",true);
				   $("#customerInfo .icon-fullscreen").hide();
				   $("#customerInfo").find(".addbtn,.leaseDate,input[type='radio']").attr("disabled",true);
				   $("#customerInfo div[id^='filePicker']").hide();
				</c:if>
				
				/* if (customerIdentity == 0) { //产权人
					$("#roomStatus").show();
				} else if (customerIdentity == 1) { //租赁人
					$("#roomStatus").hide();
				} */
				//select2 下拉菜单
				$(".js-example-placeholder-single").select2({
					placeholder : "请选择!",
					allowClear : true
				});
				$.Huitab("#tab_demo .tabBar span", "#tab_demo .tabCon", "current", "click", "1");
		
				mySubmit("customerInfo", initCustomerInfo, success3);
				initWebUpload("filePicker_qyzj", "list_qyzj", "企业证件", "companyAdd_articleId", cusstomerInfoSuccess, cusstomerInfoErr);
				initWebUpload("filePicker_frsfz", "list_frsfz", "法人身份证", "customerInfoAdd_articleId", cusstomerInfoSuccess, cusstomerInfoErr);
				initWebUpload("filePicker_frhz", "list_frhz", "法人护照", "customerInfoAdd_articleId", cusstomerInfoSuccess, cusstomerInfoErr);
				initWebUpload("filePicker_zrsfz", "list_zrsfz", "自然人身份证", "customerInfoAdd_articleId", cusstomerInfoSuccess, cusstomerInfoErr);
				initWebUpload("filePicker_zrhz", "list_zrhz", "自然人护照", "customerInfoAdd_articleId", cusstomerInfoSuccess, cusstomerInfoErr);
				//当刚开始这个div没有被展示 display=none时 这个div的宽高会为0，导致不能点击，所以要手动设置高度
				$("div[id^='filePicker_'] div").css({
					"width" : "60px",
					"height" : "28px"
				});
				var fkcustomerId= window.parent.$("#customerId").val();
				//var fkroomId = window.parent.$("#roomId").val();
				//初始化表格,动态从服务器加载数据  
				 $("#customerChageTable").bootstrapTable({
					method : "post", //使用get请求到服务器获取数据  
					url : "customer/dm/getCustomerChangeList", //获取数据的Servlet地址  
					striped : true, //表格显示条纹  
					pagination : true, //启动分页  
					pageSize : 2, //每页显示的记录数  
					pageNumber : 1, //当前第几页  
					pageList : [ 5, 10, 15, 20, 25 ], //记录数可选列表  
					sidePagination : "server", //表示服务端请求  
					contentType : 'application/x-www-form-urlencoded',
					//设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder  
					//设置为limit可以获取limit, offset, search, sort, order  
					queryParamsType : "undefined",
					queryParams : function queryParams(params) { //设置查询参数  
						var param = {
							pageNumber : params.pageNumber,
							pageSize : params.pageSize,
							fkcustomerId : fkcustomerId
						//	fkroomId : fkroomId,
						//	customerType :customerType
						};
						return param;
					},
					columns : [ {
						field : 'createtime',
						title : '修改时间',
						width : '15%',
						formatter:dataFormat
					}, {
						field : 'fieldname',
						title : '修改字段',
						width : '7%'
					}, {
						field : 'changebefore',
						title : '修改前数据',
						width : '25%',
						formatter:showText	
					}, {
						field : 'changeafter',
						title : '修改后数据',
						width : '25%',
						formatter:showText	
					}, {
						field : 'adduser',
						title : '修改人',
						width : '7%',
					}, {
						field : 'remarks',
						title : '变更说明',
						width : '21%',
						formatter:showText	
					} ]
				});
			});
			
			//日期格式化
			function dataFormat(value, row, index) {
				return new Date(value).format("yyyy-MM-dd hh:mm:ss");
			}
			//opt操作字段，0：临时保存；1：新增；2：修改
			function saveCustomer(val){
				var opt=val;
				if(val==3){
					//解除锁定状态
					var index=layer.confirm('确定开启编辑状态？', {
					 	offset:'20%',
						shade:0
					}, function(){
					  //去除只读开启按钮编辑
					   $("#customerInfo").find("input,textarea").attr("readonly",false);
					   $("#customerInfo #modifyBtn").remove();
					   $("#customerInfo .hidbtn").removeClass("hidbtn");
					   $("#customerInfo .icon-fullscreen").show();
					   $("#customerInfo").find(".addbtn,.leaseDate,input[type='radio']").attr("disabled",false);
					   $("#customerInfo #remark").show();
					   $(".uploadcancel").show();
					   //上传按钮设置为可点击
					   $("div[id^='filePicker']").css("display","inline-block");
					   //当刚开始这个div没有被展示 display=none时 这个div的宽高会为0，导致不能点击，所以要手动设置高度
					$("div[id^='filePicker_'] div").css({
						"width" : "60px",
						"height" : "28px"
					});
					   layer.close(index);
					});
				}
			}
			
			//根据状态提交表单
			function customerSubmit(_this) {
				var html = $(_this).html();
				if (html == "提交") {
					opt = 0;
				} else if (html == "保存") {
					opt = 1;
				}
				$("#customerInfo").submit();
			//修改状态不需要管，如果为修改 则在封装表单数据方法中会恒定给一个赋值语句
			}
		
			jQuery.Huitab = function(tabBar, tabCon, class_name, tabEvent, i) {
				var $tab_menu = $(tabBar);
				// 初始化操作
				$tab_menu.removeClass(class_name);
				$(tabBar).eq(i).addClass(class_name);
				$(tabCon).hide();
				$(tabCon).eq(i).show();
		
				$tab_menu.bind(tabEvent, function() {
					$tab_menu.removeClass(class_name);
					$(this).addClass(class_name);
					var index = $tab_menu.index(this);
					$(tabCon).hide();
					$(tabCon).eq(index).show()
				});
			}
		
			function addRelevantDiv(obj, i) {
				//修改附件id 缩略图id 和隐藏域id
				if (count == 0) {
					$("#relevant #filePicker_xgsfz").attr('id', "filePicker_xgsfz" + count);
					$("#relevant #list_xgsfz").attr('id', "list_xgsfz" + count);
					$("#relevant #relevantAdd_articleId").attr('id', "relevantAdd_articleId" + count);
					$("#relevant #filePicker_xghz").attr('id', "filePicker_xghz" + count);
					$("#relevant #list_xghz").attr('id', "list_xghz" + count);
				} else {
					$("#relevant #filePicker_xgsfz" + (count - 1)).attr('id', "filePicker_xgsfz" + count);
					$("#relevant #list_xgsfz" + (count - 1)).attr('id', "list_xgsfz" + count);
					$("#relevant #relevantAdd_articleId" + (count - 1)).attr('id', "relevantAdd_articleId" + count);
					$("#relevant #filePicker_xghz" + (count - 1)).attr('id', "filePicker_xghz" + count);
					$("#relevant #list_xghz" + (count - 1)).attr('id', "list_xghz" + count);
				}
				var node = $("#relevant").html();
				var oTest = $("#vant_" + i);
				oTest.append(node);
				initWebUpload("filePicker_xgsfz" + count, "list_xgsfz" + count, "相关人身份证", "relevantAdd_articleId" + count, cusstomerInfoSuccess, cusstomerInfoErr);
				initWebUpload("filePicker_xghz" + count, "list_xghz" + count, "相关人护照", "relevantAdd_articleId" + count, cusstomerInfoSuccess, cusstomerInfoErr);
				$("div[id^='filePicker']").css("display","inline-block");
				//当刚开始这个div没有被展示 display=none时 这个div的宽高会为0，导致不能点击，所以要手动设置高度
				$("div[id^='filePicker_'] div").css({
					"width" : "60px",
					"height" : "28px"
				});
				count++;
			}
			//删除相关人员
			function delRelevant(obj) {
				var $corrDiv=$(obj).parent().parent().parent();
				var cid=$corrDiv.children("input[name='corrCustomerId']").val();
				rCustomerList.push(cid);
				$corrDiv.remove();
			}
		
			//上传成功回调
			function cusstomerInfoSuccess(file, response) {
				PostbirdImgGlass.init({
					domSelector : "#" + file.id + " img",
					animation : true,
					//height:'80%',
					myDocument : window.parent.parent.parent
				});
			}
			//上传失败回调
			function cusstomerInfoErr(file, data) {
				//alert("上传失败回调");
			}
		
			//区别保存还是修改操作，随着表单提交到后台由后台处理  0提交; 1:添加; 2:修改
			var opt = 0;
			//记录相关人员 是否合法
			var corrCunstomer;
			//封装表单数据为json
			var x;
			function initCustomerInfo() {
				x = layer.load(2); //弹出加载层 防止多次点击
				corrCunstomer = true;
				var companyName;
				var companyEnglishName;
				var companyBranch;
				var companyNature;
				var registerAddress;
				var mailingAddress;
				var businessScope;
				var companyData;
				var name;
				var alias;
				var tel;
				var telMobile;
				var weixin;
				var qq;
				var email;
				var idCard; //身份证 YCL 补充
				var passport; //护照 YCL 补充
				var companyData;
				var staLease;//起始租期
				var endLease;//终止租期
				var correlationCustomer;
				//var roomStatus; //房间状态
				var customerId; //客户id 法人或自然人
				var companyId; //公司id
				var companyAccessoryCaList; //公司附件集合
				var customerAccessoryCaList; //产权人附件集合
				var remark;//变更说明
				var customerRemark;//客户备注信息
				//封装基本数据
				var fkRoomInfo = window.parent.$("#roomId").val();
				//区别法人、自然人字段
				var customerType = $("select[name='customerType']").val();
				//当编辑时不能选择下拉菜单导致customerType获取不到值，所以在没有下拉的时候手动赋值
				<c:if test="${!pageScope.customerType }">
					customerType=${requestScope.customerInfo1.customerType}${requestScope.customerInfo2.customerType};
					//如果是修改状态，则将值改为2
					opt=2;
				</c:if>
				//roomStatus = $("input[name='roomStatus']:checked").val();
				//租期请款赋值
				staLease = $("div.leaseInfo input[name='staLease']").val();
				endLease = $("div.leaseInfo input[name='endLease']").val();
				if(staLease == ""){
					staLease = null;
				}
				if(endLease == ""){
					endLease = null;
				}
				var crmId = '${requestScope.customerRoomMap.id }';//客户房间映射表Id
				if (customerType == 1) { //法人
					companyName = $("#panel0 .mCus input[name='companyName']").val();
					companyEnglishName = $("#panel0 .mCus input[name='companyEnglishName']").val();
					companyBranch = $("#panel0 .mCus input[name='companyBranch']").val();
					companyNature = $("#panel0 .mCus input[name='companyNature']").val();
					registerAddress = $("#panel0 .mCus input[name='registerAddress']").val();
					mailingAddress = $("#panel0 .mCus input[name='mailingAddress']").val();
					businessScope = $("#panel0 .mCus textarea[name='businessScope']").val();
					companyCard = $("#panel0 .mCus input[name='companyCard']").val();
					companyId = $("#panel0 .mCus input[name='companyId']").val();
					companyAccessoryCaList = $("#companyAdd_articleId").val();
					customerAccessoryCaList = $("#customerInfoAdd_articleId").val();
					remark = $("#panel0 textarea[name='remark']").val();
					customerRemark = $("#panel0 .mCus textarea[name='customerRemark']").val();
					
					if (!valLength(50, companyName)) {
						layer.msg("单位名称长度不能超过50");
						$("#panel0 input[name='companyName']").focus();
						layer.close(x);
						return null;
					}
					if(companyEnglishName.length>100){
						layer.msg("外文名称长度不能超过100");
						$("#panel0 input[name='companyEnglishName']").focus();
						layer.close(x);
						return null;
					}
					if(companyBranch.length>100){
						layer.msg("分支机构长度不能超过100");
						$("#panel0 input[name='companyBranch']").focus();
						layer.close(x);
						return null;
					}
					if(companyNature.length>100){
						layer.msg("企业性质长度不能超过100");
						$("#panel0 input[name='companyNature']").focus();
						layer.close(x);
						return null;
					}
					if(registerAddress.length>100){
						layer.msg("注册地址长度不能超过100");
						$("#panel0 input[name='registerAddress']").focus();
						layer.close(x);
						return null;
					}
					if(mailingAddress.length>100){
						layer.msg("通讯地址长度不能超过100");
						$("#panel0 input[name='mailingAddress']").focus();
						layer.close(x);
						return null;
					}
					if(businessScope.length>1000){
						layer.msg("营业范围长度不能超过1000");
						$("#panel0 input[name='businessScope']").focus();
						layer.close(x);
						return null;
					}
					if(opt == "2"){
						if(remark == "" || remark == undefined){
							layer.msg("变更说明不能为空");
							layer.close(x);
							return null;
						}
					}
					companyData = {
						id : companyId,
						companyName : companyName,
						companyEnglishName : companyEnglishName,
						companyBranch : companyBranch,
						companyNature : companyNature,
						registerAddress : registerAddress,
						mailingAddress : mailingAddress,
						businessScope : businessScope,
						companyCard : companyCard
					};
					name = $("#panel0 .mCus input[name='name']").val();
					alias = $("#panel0 .mCus input[name='alias']").val();
					tel = $("#panel0 .mCus input[name='tel']").val();
					telMobile = $("#panel0 .mCus input[name='telMobile']").val();
					weixin = $("#panel0 .mCus input[name='weixin']").val();
					qq = $("#panel0 .mCus input[name='qq']").val();
					email = $("#panel0 .mCus input[name='email']").val();
					idCard = $("#panel0 .mCus input[name='idCard']").val(); //身份证 YCL 补充
					passport = $("#panel0 .mCus input[name='passport']").val(); //护照 YCL 补充
					customerId = $("#panel0 .mCus input[name='customerId']").val(); //客户id YCL补充
					if (!isCardNo(idCard)) {
						layer.msg("请输入有效身份证号码");
						$("#panel0 .mCus input[name='idCard']").focus();
						layer.close(x);
						return null;
					}
					if (!is_email(email)) {
						layer.msg("请输入有效邮箱");
						$("#panel0 .mCus input[name='email']").focus();
						layer.close(x);
						return null;
					}
					if (!is_mobile(telMobile)) {
						layer.msg("请输入有效手机号");
						$("#panel0 .mCus input[name='telMobile']").focus();
						layer.close(x);
						return null;
					}
					if (!is_tel(tel)) {
						layer.msg("请输入有效座机号");
						$("#panel0 .mCus input[name='tel']").focus();
						layer.close(x);
						return null;
					}
					correlationCustomer = packageVarPerson(1);
				} else { //自然人
					id:customerId,
					name = $("#panel1 .mCus input[name='name']").val();
					alias = $("#panel1 .mCus input[name='alias']").val();
					tel = $("#panel1 .mCus input[name='tel']").val();
					telMobile = $("#panel1 .mCus input[name='telMobile']").val();
					weixin = $("#panel1 .mCus input[name='weixin']").val();
					qq = $("#panel1 .mCus input[name='qq']").val();
					email = $("#panel1 .mCus input[name='email']").val();
					idCard = $("#panel1 .mCus input[name='idCard']").val();
					passport = $("#panel1 .mCus input[name='passport']").val();
					customerId = $("#panel1 .mCus input[name='customerId']").val(); //客户id YCL补充
					customerAccessoryCaList = $("#customerInfoAdd_articleId").val();
					remark = $("#panel1 textarea[name='remark']").val();
					customerRemark = $("#panel1 .mCus textarea[name='customerRemark']").val();
					correlationCustomer = packageVarPerson(2);
					if(opt == "2"){
						if(remark == "" || remark == undefined){
							layer.msg("变更说明不能为空");
							layer.close(x);
							return null;
						}
					}
					if (!isCardNo(idCard)) {
						layer.msg("请输入有效身份证号码");
						$("#panel1 .mCus input[name='idCard']").focus();
						layer.close(x);
						return null;
					}
					if (!is_email(email)) {
						layer.msg("请输入有效邮箱");
						$("#panel1 .mCus input[name='email']").focus();
						layer.close(x);
						return null;
					}
					if (!is_mobile(telMobile)) {
						layer.msg("请输入有效手机号");
						$("#panel1 .mCus input[name='telMobile']").focus();
						layer.close(x);
						return null;
					}
					if (!is_tel(tel)) {
						layer.msg("请输入有效座机号");
						$("#panel1 .mCus input[name='tel']").focus();
						layer.close(x);
						return null;
					}
				}
				if (!corrCunstomer) {
					return null;
				}
		
				var formData = {
					crmId:crmId,
					opt : opt,
					pid:top.projectID,
					staLease:staLease,
					endLease:endLease,
					remark : remark,//编辑时填写备注
					id : customerId,
					rCustomerList:rCustomerList,
					fkRoomInfo : fkRoomInfo,
					customerIdentity : customerIdentity,
					customerType : customerType,
					name : name,
					alias : alias,
					tel : tel,
					telMobile : telMobile,
					weixin : weixin,
					qq : qq,
					email : email,
					idCard : idCard,
					passport : passport,
					//roomStatus : roomStatus,
					company : companyData,
					correlationCustomer2 : correlationCustomer,
					customerAccessoryCaList : customerAccessoryCaList,
					companyAccessoryCaList : companyAccessoryCaList,
					fkCompany:companyId,
					historystatus:0,
					customerRemark:customerRemark,//客户备注信息
					rFileList : rFileList.toString() //带删除的附件id数组，仅当状态为修改时有效,里面记录了当前页面所有要修改的附件
				};
				return formData;
			}
		
			//封装相关人员数据
			function packageVarPerson(j) {
				var $t = $("#vant_" + j + ">div");
				var vanPerson = new Array();
				$.each($t, function(i, v) {
					var name = $(v).find("input[name='name']").val();
					var alias = $(v).find("input[name='alias']").val();
					var tel = $(v).find("input[name='tel']").val();
					var telMobile = $(v).find("input[name='telMobile']").val();
					var weixin = $(v).find("input[name='weixin']").val();
					var qq = $(v).find("input[name='qq']").val();
					var email = $(v).find("input[name='email']").val();
					var idCard = $(v).find("input[name='idCard']").val(); //身份证 YCL 补充
					var passport = $(v).find("input[name='passport']").val(); //护照 YCL 补充
					var duty = $(v).find("input[name='duty']").val();
					var relevancyDegree = $(v).find("input[name='relevancyDegree']").val();
					var roleDefinition = $(v).find("input[name='roleDefinition']").val();
					var roleInfo = $(v).find("input[name='roleInfo']").val();
					var corrCustomerId = $(v).find("input[name='corrCustomerId']").val();
					var relevantAccessoryCaList = $(v).find("input[name='relevantAdd_articleId']").val();
					if (!isCardNo(idCard)) {
						layer.msg("请输入有效身份证号码");
						$(v).find("input[name='idCard']").focus();
						layer.close(x);
						corrCunstomer = false;
					} else if (!is_email(email)) {
						layer.msg("请输入有效邮箱");
						$(v).find("input[name='email']").focus();
						layer.close(x);
						corrCunstomer = false;
					} else if (!is_mobile(telMobile)) {
						layer.msg("请输入有效手机号");
						$(v).find("input[name='telMobile']").focus();
						layer.close(x);
						corrCunstomer = false;
					} else if (!is_tel(tel)) {
						layer.msg("请输入有效座机号");
						$(v).find("input[name='tel']").focus();
						layer.close(x);
						corrCunstomer = false;
					}
					vanPerson.push({
						id : corrCustomerId,
						name : name,
						alias : alias,
						tel : tel,
						telMobile : telMobile,
						weixin : weixin,
						qq : qq,
						email : email,
						idCard : idCard,
						passport : passport,
						duty : duty,
						relevancyDegree : relevancyDegree,
						roleDefinition : roleDefinition,
						roleInfo : roleInfo,
						customerType : '0',
						relevantAccessoryCaList : relevantAccessoryCaList
					});
				});
				return vanPerson;
			}
		
			//成功后调用方法
			function success3(responseText) {
				//关闭加载层
				layer.close(layer.index);
				if (responseText.success) {
					layer.alert(responseText.msg, {
						offset : '20%',
						shade : [ 0.1, '#fff' ]
					}, function() {
						if (opt == "2") {
							//layer.close();
							parent.parent.layer.closeAll();
							location.reload();
						} else {
							parent.parent.layer.closeAll();
						}
		
					});
				} else {
					layer.alert(responseText.msg, {
						offset : '20%',
						shade : [ 0.1, '#fff' ]
					});
				}
			}
		</script>
	</div>
	<!-- 添加人员模板start -->
	<div id="relevant" style="display: none;">
		<div style="border: 1px solid gray; padding: 10px; margin: 10px">
			<input type="hidden" id="relevantAdd_articleId" name="relevantAdd_articleId">
			<div class="hstyle">
				<span class="mingcheng">&nbsp;&nbsp;&nbsp;&nbsp;姓名</span>
				<span>
					<input type="text" class="input-text radius neirong" name="name" />
					<span></span>
				</span>
				<span class="mingcheng">外文名称</span>
				<span>
					<input type="text" class="input-text radius neirong" name="alias" />
					<span></span>
				</span>
				<span style="float: right;">
					<a href="javascript:void(0)" onclick="delRelevant(this)">
						<i class="icon-fullscreen"></i>
					</a>
				</span>
			</div>
			<div class="hstyle">
				<span class="mingcheng">固定电话</span>
				<span>
					<input type="text" class="input-text radius neirong" name="tel" />
					<span style="color: red;"></span>
				</span>
				<span class="mingcheng">&nbsp;&nbsp;手机号</span>
				<span>
					<input class="input-text radius neirong" type="text" name="telMobile" />
					<span style="color: red;"></span>
				</span>
				<span class="mingcheng">&nbsp;&nbsp;微信号</span>
				<span>
					<input class="input-text radius neirong" type="text" name="weixin" />
					<span style="color: red;"></span>
				</span>
			</div>

			<div class="hstyle">
				<span class="mingcheng">&nbsp;&nbsp;QQ号</span>
				<span>
					<input class="input-text radius neirong" type="text" name="qq" />
					<span></span>
				</span>
				<span class="mingcheng">&nbsp;&nbsp;&nbsp;&nbsp;邮箱</span>
				<span>
					<input class="input-text radius neirong" type="text" name="email" />
					<span></span>
				</span>
			</div>
			<div class="hstyle">
				<span class="mingcheng">职务</span>
				<span>
					<input class="input-text radius neirong" type="text" name="duty" />
					<span style="color: red;"></span>
				</span>
				<span class="mingcheng">关系程度</span>
				<span>
					<input class="input-text radius neirong" type="text" name="relevancyDegree" />
					<span style="color: red;"></span>
				</span>
				<span class="mingcheng">角色定位</span>
				<span>
					<input class="input-text radius neirong" type="text" name="roleDefinition" />
					<span style="color: red;"></span>
				</span>
			</div>

			<div class="hstyle">
				<span class="mingcheng">角色内容</span>
				<span>
					<input class="input-text radius neirong" type="text" name="roleInfo" />
					<span></span>
				</span>
			</div>
			<div class="hstyle">
				<span class="mingcheng">&nbsp;&nbsp;身份证</span>
				<span>
					<input class="input-text radius neirong" type="text" name="idCard" />
					<span></span>
				</span>
				<!-- 附件上传 身份证。。。-->
				<!-- 上传按钮 -->
				<span>
					<div id='filePicker_xgsfz' style="display: none;">上传</div>
				</span>
				<!-- 缩略图容器 -->
				<div id='list_xgsfz'></div>
			</div>
			<div class="hstyle">
				<span class="mingcheng">&nbsp;&nbsp;护照</span>
				<span>
					<input class="input-text radius neirong" type="text" name="passport" />
					<span></span>
				</span>
				<!-- 附件上传 护照。。。-->
				<!-- 上传按钮 -->
				<div id='filePicker_xghz' style="display: none;">上传</div>
				<!-- 缩略图容器 -->
				<div id='list_xghz'></div>
			</div>
			<div id="tab_demo" class="HuiTab" style="height: 100px">
				<div class="tabBar clearfix">
					<span>性情分析</span>
					<span>交往记录</span>
					<span>关注事项</span>
				</div>
				<div class="tabCon">性情分析</div>
				<div class="tabCon">交往记录</div>
				<div class="tabCon">关注事项</div>
			</div>
		</div>
	</div>
	<!-- 模板end -->
</body>
</html>
